﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RoleDept.aspx.cs" Inherits="Web.RoleDept" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<title>角色部门授权</title>
    <base target="_self"/>
	<meta content="ie=7" http-equiv="x-ua-compatible">
	<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
    <META HTTP-EQUIV="Expires" CONTENT="0">
	<link href="Styles/Style01.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.7.min.js" type="text/javascript"></script>
	<style>
		body{font-size:12px;background-color:#f1f1f1;}
		table DIV { BORDER: #88b6d2 1px solid;height:422px;text-align:center;overflow:auto;}
		tr{line-height:18px;}
		table.list tr:hover{ 
			background-color:#88b6d2!important;   /* 动态变色,IE6下无效！c4e4ff*/
		}
		.tdDel,.lblDel{cursor:hand;color:#ff4f17;}
		.tdDel:hover,.lblDel:hover{color:#fff;background:#ff4f17;}
		.choosedList td{border-bottom:1px solid #88b6d2;}
		caption{text-align:center;background:url(Images/headerfade.gif);color:#fff;font-weight:bolder;cursor:auto;}
		select{width:220px;}
	</style>
</head>
<body>
<form id="Form1" runat="server">
	<table style="border: #88b6d2 1px solid;background-color:#CFDFE9;"><caption>角色部门授权</caption>
		<tr>
			<td colspan="3">
				菜单：<select id="ddlMenu" name="ddlMenu" onchange="menuChanged();" runat="server">
				       <option value="">请选择一个菜单</option>
				       <option value="Vehicle">车辆申请</option>
				       <option value="Evection">出差申请</option>
				       <option value="Overtime">加班申请</option>
				       <option value="Vacation">请假申请</option>
				       <option value="Perchase">采购申请</option>
				       <option value="Reception">商务接待申请</option>
				       <option value="EmpProfile">员工档案</option>
				       <option value="Weekly">周报管理</option>
				   </select>
			</td>
		</tr>
		<tr>
			<td>
				<span>可选部门</span><input id="chkDeptLeft" type="checkbox" onclick="chooseAll(this);" /><label for="chkDeptLeft">全选</label>
				<div style="height:422px;width:130px">
					<table class="list" id="tbDeptList">
				<asp:Repeater ID="rptDeptList" EnableViewState="False" Runat="server">
					<ItemTemplate>
						<tr>
							<td><input type="checkbox" value='<%# Eval("Id") %>'></td>
							<td><%# Eval("Text")%></td>
						</tr>
					</ItemTemplate>
				</asp:Repeater>
				</table></div>
			</td>
			<td>
				<input id="btnAdd" class="btn" type="button" value="==>" onclick="addRemove();" />
			</td>
			<td>
				<span>已选部门</span><label class="lblDel" onclick="removeAll('tbChoosedDeptList','tbDeptList');">[全删]</label>
				<div style="width:130px"><table class="choosedList" id="tbChoosedDeptList">
				<asp:Repeater ID="rptChoosedDeptList" EnableViewState="False" Runat="server">
					<ItemTemplate>
						<tr>
							<td><input type="hidden" value='<%# Eval("Id") %>'><%# Eval("Text")%></td>
							<td><span class="tdDel" title="移除" onclick="remove(this,'tbDeptList');">&nbsp;X&nbsp;</span></td>
						</tr>
					</ItemTemplate>
				</asp:Repeater>
				</table></div>
			</td>
		</tr>
	</table>
	<span style="width:350px;padding-left:180px;">
		<input id="btnSubmit" class="btn" type="button" value="保存" onclick="authSubmit();"/>
		<input id="btnClose" class="btn" type="button" value="关闭" onclick="window.close();"/>
	</span>
</form>
</body>
<script language="javascript">
    //使用数组取得表格值   
    function getRowText(objId) {
        var arr = new Array();
        var count = 0;
        var tb = document.getElementById(objId);
        for (var i = 0; i < tb.rows.length; i++) {
            var row = tb.rows[i];
            arr[count] = row.cells[0].firstChild.value;
            count++;
        }
        return arr;
    }
    //授权提交
    function authSubmit() {
        var menu = $("#ddlMenu").val();
        if (menu == "") {
            alert("请选择一个菜单!");
            return false;
        } else if (!confirm("您选择的菜单是'" + $("#ddlMenu").find("option:selected").text() + "',确认提交吗?")) {
            return false;
        }
        var arr = getRowText("tbChoosedDeptList");
        var deptIds = arr.join(",");
        var roleId = getSpecProp("roleId");
        $.ajax({
            type: "POST",
            url: "Role.mvc/AuthDept",
            data: "roleId=" + roleId + "&deptIds=" + deptIds + "&menu=" + menu,
            dataType: "json",
            success: function (response) {
                if (response == "Succeed") {
                    alert("按菜单授权保存成功!");
                    window.close();
                }
                else {
                    alert(response);
                }
            }
        });
    }
    //取网址中的特定搜索字串值
    function getSpecProp(prop) {
        var searchArr = location.search.substr(1).split("&");
        for (var i = 0; i < searchArr.length; i++) {
            if (searchArr[i].split("=")[0] == prop) {
                return searchArr[i].split("=")[1];
            }
        }
        return "";
    }
    //增加/删除 授权 人员/角色
    function addRemove() {
        var tbFrom;
        var tbTo;
        var objID = event.srcElement.id;
        if (objID == "btnAdd") {
            tbFrom = tbDeptList;
            tbTo = tbChoosedDeptList;
        }
        for (var i = 0; i < tbFrom.rows.length; ) {
            var row = tbFrom.rows[i];
            //取得CHECKBOX   
            var objCheck = row.cells[0].getElementsByTagName("INPUT")[0];
            if (objCheck != null && objCheck.checked) {
                //tbChoosedEmployeeList.appendChild(row);
                var newRow = tbTo.insertRow(0);
                var cell = newRow.insertCell(0);
                cell.innerHTML = '<input type="hidden" value="' + objCheck.value + '">' + row.cells[1].innerHTML;
                cell = newRow.insertCell(1);
                cell.innerHTML = '<span class="tdDel" title="移除" onclick="remove(this,\'' + tbFrom.id + '\');">&nbsp;X&nbsp;</span>';
                row.parentNode.removeChild(row);
            }
            else {
                i++;
            }
        }
    }
    //实现全选/全空
    function chooseAll(obj) {
        var tb;
        if (obj.id == "chkDeptLeft") {
            tb = tbDeptList;
        }
        if (obj.checked) {
            for (var i = 0; i < tb.rows.length; i++) {
                var row = tb.rows[i];
                var objCheck = row.cells[0].getElementsByTagName("INPUT")[0];
                objCheck.checked = true;
            }
        }
        else {
            for (var i = 0; i < tb.rows.length; i++) {
                var row = tb.rows[i];
                var objCheck = row.cells[0].getElementsByTagName("INPUT")[0];
                objCheck.checked = false;
            }
        }
    }
    function menuChanged() {
        if ($("#ddlMenu").val() == "") {
            alert("请选择一个菜单!");
        }else {
            $("form").submit();
        }
    }

    function remove(obj, tbID) {
        var tb = document.getElementById(tbID);
        var newRow = tb.insertRow(0);
        var cell = newRow.insertCell(0);
        cell.innerHTML = '<input type="checkbox" value=\'' + obj.parentElement.parentElement.cells[0].firstChild.value + '\' checked>';
        cell = newRow.insertCell(1);
        cell.innerHTML = obj.parentElement.parentElement.cells[0].innerText;
        obj.parentElement.parentElement.parentElement.removeChild(obj.parentElement.parentElement); //移除该行
    }
    function removeAll(fromTbId, toTbId) {
        var fromTb = document.getElementById(fromTbId);
        var toTb = document.getElementById(toTbId);
        while (fromTb.rows.length > 0) {
            var row = fromTb.rows[0];
            var newRow = toTb.insertRow(0);
            var cell = newRow.insertCell(0);
            cell.innerHTML = '<input type="checkbox" value=\'' + row.cells[0].firstChild.value + '\' checked>';
            cell = newRow.insertCell(1);
            cell.innerHTML = row.cells[0].innerText;
            fromTb.deleteRow(0); //移除该行
        }
    }
</script>
</html>